<template>
    <div class="login">
        <AForm @finish="finishForm" :model="formData" class="loginForm" v-bind="formCol">
            <AFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }, {}]">
                <AInput autocomplete="off" v-model:value="formData.username" size="large" placeholder="请输入用户名" />
            </AFormItem>
            <AFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
                <AInputPassword autocomplete="off" type="password" v-model:value="formData.password" size="large" placeholder="请输入密码" />
            </AFormItem>
            <AFormItem
                label="确认密码"
                name="password_repeat"
                :rules="[
                    { required: true, message: '请确认密码' },
                    {
                        validator: async (_rule, value) => {
                            if (value && value !== formData.password) {
                                return Promise.reject('密码不一致');
                            } else {
                                return Promise.resolve();
                            }
                        },
                    },
                ]"
            >
                <AInputPassword autocomplete="off" type="password" v-model:value="formData.password_repeat" size="large" placeholder="请确认密码" />
            </AFormItem>
            <AFormItem style="margin-bottom: 0" label="验证码" :rules="[{ required: true }]">
                <ARow justify="space-between">
                    <ACol span="15">
                        <AFormItem :rules="[{ required: true, message: '请输入验证码' }]" name="captcha">
                            <AInput autocomplete="off" :maxlength="4" v-model:value="formData.captcha" size="large" placeholder="请输入验证码" />
                        </AFormItem>
                    </ACol>
                    <ACol>
                        <img @click="timeStamp = getNow()" class="checkcode" height="40" :src="`${captchaUrl}?t=${timeStamp}`" alt="" />
                    </ACol>
                </ARow>
            </AFormItem>
            <AFormItem label="性别" name="sex">
                <ASelect v-model:value="formData.sex">
                    <ASelectOption :value="1">男</ASelectOption>
                    <ASelectOption :value="0">女</ASelectOption>
                    <ASelectOption :value="2">保密</ASelectOption>
                </ASelect>
            </AFormItem>
            <AButton htmlType="submit" size="large" type="primary" block>注册</AButton>
            <ARow style="width: 100%" justify="end">
                <AButton @click="$emit('toggleForm')" type="link">有账号？去登录</AButton>
            </ARow>
        </AForm>
    </div>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({});
</script>

<script setup>
import { registerApi } from "@/api/user";
import { reactive, ref } from "@vue/reactivity";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { initMenus } from "@/utils/menus";
import store from "@/store";
const router = useRouter();
const formData = reactive({
    username: "",
    password: "",
    password_repeat: "",
    captcha: "",
    sex: 1,
});
const getNow = () => Date.now();
const timeStamp = ref(Date.now());
const formCol = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 19,
    },
};
const captchaUrl = `${process.env.VUE_APP_BASEURL}/admin/login/code`;
const finishForm = () => {
    console.log(formData);
    registerApi(formData).then(res => {
        if (res.code === 200) {
            message.success("注册成功，即将跳转");
            setInterval(async () => {
                await initMenus();
                await store.dispatch("getUserInfo");
                router.push({ path: "/" });
            }, 1000);
        } else {
            if (res.message && res.message.includes("验证码")) {
                timeStamp.value = Date.now();
            }
        }
    });
};
const Promise = window.Promise;
</script>

<style scoped lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30vh;
    .loginForm {
        width: 400px;
        .checkcode {
            float: right;
            cursor: pointer;
        }
    }
}
</style>
